<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body {
				min-height: 100vh;
				padding: 20px;
			}
			.container {
				max-width: 1200px;
				margin: 0 auto;
				background: white;
				border-radius: 15px;
				padding: 30px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
			}
			.grid-row {
				display: flex;
				margin-bottom: 10px;
				gap: 10px;
			}
			.grid-item {
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-weight: bold;
				font-size: 16px;
				border-radius: 8px;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s ease;
			}
			.grid-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="grid-row">
				<div
					class="grid-item"
					data-width="300"
					data-height="200"
					style="background-color: #ff6b6b"
				>
					宽300 高200
				</div>
				<div
					class="grid-item"
					data-width="400"
					data-height="200"
					style="background-color: #4ecdc4"
				>
					宽400 高200
				</div>
				<div
					class="grid-item"
					data-width="250"
					data-height="200"
					style="background-color: #45b7d1"
				>
					宽250 高200
				</div>
			</div>
			<div class="grid-row">
				<div
					class="grid-item"
					data-width="500"
					data-height="200"
					style="background-color: #f9ca24"
				>
					宽500 高200
				</div>
				<div
					class="grid-item"
					data-width="200"
					data-height="200"
					style="background-color: #f0932b"
				>
					宽200 高200
				</div>
				<div
					class="grid-item"
					data-width="350"
					data-height="200"
					style="background-color: #eb4d4b"
				>
					宽350 高200
				</div>
			</div>
		</div>
		<script>
			function initGridLayout() {
				const container = document.querySelector(".container");
				const rows = container.querySelectorAll(".grid-row");
				const fixedHeight = 200;
				rows.forEach((row) => {
					const items = row.querySelectorAll(".grid-item");
					const containerWidth = container.offsetWidth - 60;
					let totalIdealWidth = 0;
					const itemData = [];
					items.forEach((item) => {
						const originalWidth = parseInt(item.dataset.width);
						const originalHeight = parseInt(item.dataset.height);
						const idealWidth = originalWidth * (fixedHeight / originalHeight);
						totalIdealWidth += idealWidth;
						itemData.push({
							element: item,
							idealWidth: idealWidth,
							originalWidth: originalWidth,
							originalHeight: originalHeight,
						});
					});
					const availableWidth = containerWidth - (items.length - 1) * 10;
					const scale = availableWidth / totalIdealWidth;
					itemData.forEach((data) => {
						const finalWidth = data.idealWidth * scale;
						data.element.style.width = finalWidth + "px";
						data.element.style.height = fixedHeight + "px";
						data.element.style.flexShrink = "0";
					});
				});
			}
			document.addEventListener("DOMContentLoaded", initGridLayout);
		</script>
	</body>
</html>
